﻿ /**
 * @Description: the styles of ZUK手机官网-公共部分
 * @Authors    : pengml1@zuk.com
 * @Date       : 2016-07-15
 * @Version    : 1.0
 */

body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr{margin:0;padding:0;}
ul,ol{list-style:none;}
body{color: #121212; font:12px/1.5 "Microsoft Yahei","\5FAE\8F6F\96C5\9ED1",arial,sans-serif;-webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased}
select,input,button{vertical-align:middle;font-size:100%;}
fieldset,img{border:0 none;}
em{font-style:normal;}
.clear{clear:both;display:block;height:0;visibility:hidden;font:0/0 arial;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size:0;}
.clearfix{*zoom:1;}

/* glabal */
body{background: #f1f1f1;}
.wrapper{width: 1100px; margin: 0 auto;}
.wrapper .sidebar{float: left; width: 240px;}
.wrapper .main{float: right; width: 840px; margin-top: 36px;}
.wrapper a,a{color: #121212; text-decoration: none;}
.wrapper a:hover,a:hover{color: #1499f8; text-decoration: none;}
.pic img{vertical-align: top;}

a{ color: #121212; text-decoration: none;-webkit-transition: color .2s linear; transition: color .2s linear;}
a:hover{ color: #1499f8; text-decoration: none;}

.icon,.input-icon,.login-form .toolbar .other-links a{background-image: url(../Images/main-bg.png); background-repeat: no-repeat;}

.personal-inner .personal-avator .ico,.global-header .my-cart a{ background-image: url(../Images/home_new_icon.png); background-repeat: no-repeat;}

/* global-top */
.global-top{ height: 40px; background-color: #f5f5f5; z-index: 12;}
.global-top .wrapper{ width: 1200px;}
.top-links{ float: left; line-height: 40px;}
.top-links a{ margin-right: 29px; font-size: 12px; color: #666;}
.top-links a:hover{ color: #1499f8;}

.login-box{ position: relative; float: right; margin-right: -18px; line-height: 40px; font-size: 12px; z-index: 13;}
.login-box a{ position: relative; display: inline-block; padding: 0 18px; color: #666; -webkit-transition: color .2s, background-color .2s; transition: color .2s, background-color .2s;}
.login-box a .line{ position: absolute; top: 0; right: 0; color: #d9d9d9; width: 2px; overflow: hidden;}
.login-box a:hover{ color: #1499f8;}

.personal-inner{ float: left; position: relative; z-index: 15;}
.personal-inner .personal-avator{ width: 122px; padding: 0 0 0 18px; border-left: 1px solid #f5f5f5; border-right: 1px solid #f5f5f5;}
.personal-inner .personal-avator .line{ right: -2px;}
.personal-inner .personal-avator .name{ display: inline-block; width: 85px; overflow: hidden; vertical-align: middle; cursor: pointer; text-align: center;}
.personal-inner .personal-avator .ico{ display: inline-block; margin-left: 9px; width: 7px; height: 5px; background-position: -193px 0; vertical-align: middle;}
.personal-inner .personal-avator:hover .ico{ background-position: -193px -18px;}
.personal-center-layer{ display: none; position: absolute; left: 0; top: 39px; width: 140px; background-color: #fff; border: 1px solid #e6e6e6; border-top: 0 none; -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.1);}
.personal-center-layer a{ display: block; padding: 0; line-height: 40px; text-align: center;}
.personal-center-layer a:hover{ background-color: #f5f5f5;}

.has-layer .personal-avator{ border-color: #e6e6e6;}
.has-layer .personal-avator .line{ display: none;}
.has-layer .personal-center-layer{ display: block;}

.global-header{ height: 89px; border-bottom: 1px solid #e6e6e6; background-color: #fff; position: relative; z-index: 11;}
.global-header .wrapper{ position: relative; width: 1200px;}
.global-header .logo,.topic-header .wrapper .logo{ float: left; margin-top: 26px; width: 138px; height: 38px; background-image: url(../Images/logo.png); background-repeat: no-repeat; font-size: 0;}

.global-header .nav-wrap{ float: left; margin-left: 252px;}
.global-header .nav-wrap li{ float: left; padding: 30px 24px 0; line-height: 28px; font-size: 16px;}
.global-header .nav-wrap li a{ display: block;}
.global-header .nav-wrap .cur a{ color: #1499f8;}

.global-header .my-cart{ float: right; margin-top: 26px; width: 118px; height: 36px; border: 1px solid #e5e5e4; border-radius: 2px; font-size: 14px; line-height: 36px;}
.global-header .my-cart a{ display: block; padding-left: 43px; background-position: -164px -38px;}
.global-header .my-cart a span{ margin-left: 4px;}
.global-header .my-cart a:hover{ background-position: -164px -70px;}

.product-list li{ position: relative; float: left; width: 240px; padding: 15px 0 0; height: 283px; text-align: center; line-height: 20px;}
.product-list a,.product-list a:hover{ color: #121212;}
.product-list img{ display: block; margin: 0 auto; vertical-align: top; -webkit-transition: all .2s ease; transition: all .2s ease;}
.product-list li:hover img{ -webkit-transform: scale(1.0211); -ms-transform: scale(1.0211); transform: scale(1.0211);}
.product-list .big-pic{ height: 298px; padding-top: 0; overflow: hidden;}
.product-list .title{ margin-top: 8px; height: 20px; font-size: 14px; overflow: hidden; font-weight: 100; cursor: pointer;}
.product-list .discript{ margin-top: 3px; height: 20px; overflow: hidden; color: #aaa; cursor: pointer;}
.product-list .price-box{ font-size: 14px; color: #ec2a00;}
.product-list .price-box del{ margin-left: 10px; color: #999; font-size: 12px;}

.sub-product-nav{ display: none; position: absolute; top: 89px; left: 0; width: 100%; height: 220px; background-color: #fff; border-top: 1px solid #e6e6e6; -webkit-box-shadow: 0 3px 3px rgba(0,0,0,.1); box-shadow: 0 3px 3px rgba(0,0,0,.1); overflow: hidden;}
.sub-product-nav .product-list{ display: none;}
.sub-product-nav .product-list .title{ margin-top: 10px; font-size: 12px;}
.sub-product-nav .product-list li{ width: 200px; padding-top: 28px; height: 190px;}
.sub-product-nav .product-list li:hover img{  -webkit-transform: none; -ms-transform: none; transform: none;}
.sub-product-nav .price-box{ font-size: 12px !important;}

/* global-footer */
.global-footer{min-width: 1200px; margin: 80px 0 0; background: #fbfbfb; border-top: 1px solid #f1f1f1;}
.global-footer .promise-box{width: 1200px; height: 142px; margin: 0 auto;}
.global-footer .promise-box a{ color: #121212;}
.global-footer .promise-box a:hover{ color: #1499f8;}
.global-footer .promise-box li{float: left; width: 200px; text-align: center;}
.global-footer .promise-box .first{ width: 100px; margin-right: 205px;}
.global-footer .promise-box .two{ margin-right: 160px;}
.global-footer .promise-box .last{ width: 110px; float: right;}
.global-footer .promise-box .icon{display: block; width: 32px; height: 30px; overflow: hidden; margin: 40px auto 0; background-position: 0 -150px;}
.global-footer .promise-box .back-icon{height: 31px; margin-top: 39px; background-position: -45px -150px;}
.global-footer .promise-box .change-icon{background-position: -85px -150px;}
.global-footer .promise-box .back-icon{width: 34px; background-position: -45px -150px;}
.global-footer .promise-box .store-icon{background-position: 0 -185px;}
.global-footer .promise-box strong{display: block; height: 26px; overflow: hidden; margin: 14px auto 0; font-size: 14px; line-height: 26px;}

.global-footer .col-contact .contact-btn,.global-footer .language a,.global-footer .language a i{background: url(../Images/global-btn.png) no-repeat;}

.global-footer .col-box{ background-color: #fff;}
.global-footer .col-wrap{ padding: 33px 0 32px; width: 1200px;}
.global-footer .col-links{ float: left; /*width: 162px;*/ width: 230px; color: #333;}
.global-footer .col-links dt{ margin-bottom: 17px; font-size: 14px; font-weight: 700; line-height: 26px;}
.global-footer .col-links dd{ line-height: 26px;}
.global-footer .col-links .weixin{ position: relative; display: inline-block;}
.global-footer .col-links .weixin img{ display: none; position: absolute; top: -40px; left: 53px;}
.global-footer .col-links a{ color: #333;}
.global-footer .col-links a:hover{ color: #1499f8;}
.global-footer .col-contact{ float: right; margin-top: 6px; width: 211px; text-align: right;}
.global-footer .col-contact .contact-btn{ display: inline-block; width: 120px; height: 40px; background-position: 0 0; line-height: 40px; font-size: 14px; text-align: center; font-weight: 700; color: #fff;}
.global-footer .col-contact .tel-num{ display: block; margin-top: 14px; font: 30px/36px arial;}
.global-footer .col-contact .work-time{ line-height: 24px; color: #999;}
.global-footer .copyright{ height: 60px; line-height: 60px; background-color: #fbfbfb; border-top: 1px solid #f1f1f1;}
.global-footer .copyright .wrapper{ width: 1200px;}
.global-footer .copyright p{ float: left; color: #b8b8b8;}
.global-footer .language{ float: right; margin-top: 10px; position: relative;}
.global-footer .language a{ position: relative; display: block; padding: 0 0 0 38px; width: 66px; height: 34px; line-height: 34px;}
.global-footer .language a i{ position: absolute; top: 15px; right: 13px; width: 7px; height: 5px; background-position: -113px -46px;}
.global-footer .language .english{ display: none; position: absolute; top: -36px; left: 0; background-position: 0 -78px; background-color: #fff; border: 1px solid #e6e6e6; border-radius: 3px 3px 0 0; box-shadow: 0 -1px 7px 1px rgba(0,0,0,.1);}
.global-footer .language .chinese{ background-position: 0 -44px; border: 1px solid #fbfbfb; border-top: 0 none;}
.global-footer .hover-layer .english{ display: block;}
.global-footer .hover-layer .chinese{ background-color: #f3f3f3; border-radius: 0 3px 3px 0; box-shadow: 0 1px 7px 1px rgba(0,0,0,.1); border-color: #e6e6e6;}

/* side-nav */
.side-nav{width: 238px; margin: 36px 0 0; border: 1px solid #e4e4e4; border-top: 0 none; background: #fff;}
.side-nav .item-header{height: 48px; padding: 0 0 0 40px; border-top: 1px solid #e4e4e4; background: #fafafa; font-weight: normal; font-size: 16px; line-height: 48px;}
.side-nav .sub-links{padding: 12px 0 20px;}
.side-nav .sub-links li{ position:relative; padding-left: 4px; height: 40px; font-size: 14px; line-height: 40px; z-index: 4;}
.side-nav .sub-links li .line{ display: none; position: absolute; width: 4px; height: 50px; background-color: #1499f7; top: -5px; left: 0;}
.side-nav .sub-links .current .line{ display: block;}
.side-nav .sub-links a{padding: 0 0 0 37px; color: #999;}
.side-nav .sub-links a:hover{color: #1499f8;}
.side-nav .sub-links .current a,.side-nav .sub-links .current a:hover
{color: #000; cursor: default; text-decoration: none;} 

/* select */
.select{position: relative; z-index: 900; float: left; width: 181px; height: 36px; margin: 0 12px 0 0; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #e4e4e4; color: #999; line-height: 36px; cursor: pointer;}
.select .select-trigger{position: relative; z-index: 10; display: block; height: 36px; overflow: hidden; padding: 0 24px 0 14px; color: #999; font-size: 14px;}
.select .select-trigger em{ display: block; background-color: #fff;}
.select .select-trigger .icon{position: absolute; top: 15px; right: 13px; width: 7px; height: 5px; overflow: hidden; background-position: -163px -30px; opacity: .6; font: 0/0 arial;}
.select .select-layerbox{display: none; position: absolute; top: 36px; left: -1px; z-index: 100; width: 181px; overflow: hidden; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #e4e4e4; background: #fff; -webkit-box-shadow: 0 0 5px rgba(0,0,0,.1); box-shadow: 0 0 5px rgba(0,0,0,.1);}
.select .select-layerbox .option-items{position: relative; max-height: 177px; overflow-x: hidden; overflow-y: auto;}
.select .select-layerbox .option-items .icon{position: absolute; top: 11px; left: 10px; width: 10px; height: 7px; overflow: hidden; background-position:  -1600px -1000px;}
.select .select-layerbox .option-item{display: block; position: relative; padding: 0 0 0 30px; height: 28px; color: #121212; font-size: 12px; line-height: 28px;}
.select .select-layerbox .option-item:hover{background: #1497f4; color: #fff; text-decoration: none;}
.select .select-layerbox .current .icon{background-position: -70px -295px!important;}
.h-select .select-layerbox{display: block;}
.h-select .select-trigger .icon{background-position: -163px -50px!important;}
.select.error{border-color: #f34d32;}

.delete-txt .wrong-icon,.delete-txt .right-icon{ background: url(../Images/icon.png) no-repeat;}
.delete-layer{ width: 440px; margin: -142px 0 0 -220px;}
.delete-txt{ padding: 61px 0 68px; text-align: center;}
.delete-txt span{ display: inline-block; padding-left: 46px; font-size: 14px; line-height: 36px;}
.delete-txt .wrong-icon{ background-position: 0 0;}
.delete-txt .right-icon{ background-position: 0 -51px;}

/* notFound-box */
.notFound-box{position: relative; display: block; width: 687px; height: 752px; margin: 60px auto -60px; background: url(../Images/404-bg.png) no-repeat center;}
.notFound-box p{position: absolute; left: 0; bottom: 160px; width: 687px; height: 40px; color: #999; font-size: 20px; line-height: 40px; text-align: center;}
.notFound-box .buy-button{position: absolute; left: 50%; bottom: 60px; display: block; width: 180px; height: 50px; overflow: hidden; margin: 0 0 0 -90px; background: #1499f7; -wenkit-border-radius: 3px; border-radius: 3px; color: #fff; font-size: 18px; text-align: center; line-height: 50px; vertical-align: middle;}
.notFound-box .buy-button:hover{background-color: #0488e4; color: #fff; text-decoration: none;}

/* 弹层样式 */
.pop-layer .pop-layer-head .close,
.login-form .default-address .checkbox{background: url(../Images/person.png) no-repeat;}
.layer-bg{ position: fixed; width: 100%; height: 100%; top: 0; left: 0; filter:progid:DXImageTransform.Microsoft.gradient(enabled="true", startColorstr="#7F000000", endColorstr="#7F000000");
background-color:rgba(0,0,0,0.5); z-index: 999;}
:root .layer-bg{ filter: none;}
.pop-layer{ position: fixed; top: 50%; left: 50%; border-radius: 3px; overflow: hidden; border: 1px solid #e4e4e4; background-color: #fff; z-index: 1000;}
.pop-layer .pop-layer-head,.pop-layer-footer{ height: 58px; padding: 0 29px; background-color: #f1f1f1;}
.pop-layer .pop-layer-head h3{ font-size: 16px; line-height: 58px; color: #121212; font-weight: 400;}
.pop-layer .pop-layer-head .close{position: absolute; display: block; top: 22px; right: 29px; width: 16px; height: 16px; background-position: 0 -198px; overflow: hidden; text-indent: -999em;}
.pop-layer .pop-layer-footer .cancle-btn,
.pop-layer .pop-layer-footer .sub-btn{ float: left; margin-top: 11px; width: 98px; height: 34px; border-radius: 2px; line-height: 34px; text-align: center; font-size: 14px; text-decoration: none;}
.pop-layer .pop-layer-footer .cancle-btn{background-color: #fff; border: 1px solid #e4e4e4; color: #121212;}
.pop-layer .pop-layer-footer .cancle-btn:hover{ border-color: #ccc;}
.pop-layer .pop-layer-footer .sub-btn{ float: right; height: 36px; line-height: 36px; border: 1px solid #1499f7; background-color: #1499f7; color: #fff; font-family: "microsoft yahei"; cursor: pointer;}
.pop-layer .pop-layer-footer .sub-btn:hover{ background-color: #0488e4;}
.add-address-layer{ width: 682px; margin: -200px 0 0 -341px;}

/* login-form */ 
.login-form{width: 378px; margin: 0 auto; padding: 28px 0 0;}
.login-form .form-items .form-item{position: relative; margin: 10px 0 0;}
.login-form .form-items .input-wrap{position: relative; float: left; width: 330px; height: 46px; overflow: hidden; padding: 0 0 0 46px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #e4e4e4; color: #999; font-size: 14px; line-height: 18px; font-family: 'Microsoft YaHei','\5FAE\8F6F\96C5\9ED1';}
.login-form .form-items .input-wrap input{height: 18px; width: 300px; padding: 14px 14px; outline: 0 none; border: 0 none; border-left: 1px solid #e4e4e4; font-family: 'Microsoft YaHei','\5FAE\8F6F\96C5\9ED1';}
.login-form .form-items .input-wrap .input-icon{position: absolute; top: 50%; left: 15px; width: 16px; height: 17px; overflow: hidden; margin: -9px 0 0 0; background-position: -154px -155px;}
.login-form .form-items .input-wrap .password-icon{left: 13px; width: 18px; height: 18px; background-position: -152px -210px;}
.login-form .form-items .input-wrap .verify-icon{width: 14px; height: 14px; margin-top: -7px; background-position: -156px -185px;}
.login-form .form-items .focus-wrap{border-color: #1477f9; color: #121212;}
.login-form .form-items .focus-wrap input{border-left-color: #1477f9;}
.login-form .form-items .verify-item{padding: 0 118px 0 0;}
.login-form .form-items .verify-item .input-wrap{width: 212px;}
.login-form .form-items .verify-item button{position: absolute; top: 0; right: 0; width: 108px; height: 48px; outline: 0 none; -weblit-border-radius: 3px; border-radius: 3px; border: 0 none; background: #f1f1f1; font: normal 14px/48px 'Microsoft YaHei','\5FAE\8F6F\96C5\9ED1'; cursor: pointer;}
.login-form .toolbar{height: 22px; margin: 18px 0 0; overflow: hidden; font-size: 12px; line-height: 22px;}
.login-form .toolbar .other-links{float: right; height: 22px; margin: 4px 0 0;}
.login-form .toolbar .other-links a{float: right; width: 19px; height: 16px; overflow: hidden; margin: 0 0 0 8px; background-position: -151px -265px; font: 0/0 arial;}
.login-form .toolbar .other-links .qq-link{width: 15px; height: 16px; background-position: -155px -240px;}
.login-form .toolbar .forget-link{color: #1499f7;}
.login-form .toolbar .default-address{float: left; height: 22px; overflow: hidden; margin: 0 12px 0 0; color: #121212; font-size: 12px; line-height: 22px; cursor: pointer;}
.login-form .toolbar .default-address .checkbox{float: left; width: 18px; height: 18px; overflow: hidden; margin: 3px 12px 0 0; background-position: -61px -141px;}
.login-form .toolbar .checked .checkbox{ background-position: -61px -174px;}
.login-form .button-box .button{display: block; height: 50px; width: 100%; margin: 10px 0 0; border: 0 none; -weblit-border-radius: 3px; border-radius: 3px; background: #1499f7; color: #fff; font: normal 18px/50px 'Microsoft YaHei','\5FAE\8F6F\96C5\9ED1'; text-align: center; cursor: pointer;}
.login-form .button-box .disabled,.login-form .button-box .disabled:hover{background-color: #b3b3b3; cursor: default;}
.login-form .button-box .login-button{margin-top: 48px;}
.login-form .button-box .register-button{background: #f1f1f1; color: #121212;}
.login-form .rule-box{height: 22px; margin: 15px 0 0; padding: 0 0 20px; color: #999; text-align: center; font-size: 12px; line-height: 22px;}
.login-form .rule-box span{display: inline-block; color: #999; vertical-align: middle;}
.login-form .rule-box span a{color: #1499f7;}
.login-form .rule-box .default-address{height: 22px; overflow: hidden; margin: 0 12px 0 0; font-size: 12px; line-height: 22px; cursor: pointer;}
.login-form .rule-box .default-address .checkbox{float: left; width: 18px; height: 18px; overflow: hidden; margin: 3px 12px 0 0; background-position: -61px -141px;}
.login-form .rule-box .checked .checkbox{ background-position: -61px -174px;}
.login-form .login-bar{width: 440px; margin: 0 0 0 -31px; border-top: 1px solid #e4e4e4; text-align: center;}
.login-form .login-bar p{margin: 20px 0 0; height: 22px; font: normal 12px/22px 'Microsoft YaHei','\5FAE\8F6F\96C5\9ED1';}
.login-form .login-bar a{display: inline-block; width: 34px; height: 18px; overflow: hidden; margin: 0 0 0 10px; background: #1499f7; -weblit-border-radius: 3px; border-radius: 3px; color: #fff; line-height: 18px; vertical-align: middle;}


/* bx-wrapper */ 
.bx-wrapper{position: relative; margin: 0 auto; padding: 0; *zoom: 1;}
.bx-wrapper img{/*max-width: 100%;*/ display: block;} 
.bx-wrapper .bx-viewport{left: 0; background: #fff;-webkit-transform:translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); transform: translatez(0);}
.bx-wrapper .bx-pager,.bx-wrapper .bx-controls-auto{position: absolute; bottom: -30px; width: 100%;}
.bx-wrapper .bx-loading{min-height: 50px; background: url(../Images/bx_loader.gif) center center no-repeat #fff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000;}
.bx-wrapper .bx-pager{text-align: center; font-size: .85em; font-family: Arial; font-weight: bold; color: #666; padding-top: 20px;}
.bx-wrapper .bx-pager .bx-pager-item,.bx-wrapper .bx-controls-auto .bx-controls-auto-item{display: inline-block; *zoom: 1; *display: inline; vertical-align: middle;}
.bx-wrapper .bx-pager.bx-default-pager a{background: #666; text-indent: -9999px; display: block; width: 10px; height: 10px; margin: 0 5px; outline: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
.bx-wrapper .bx-pager.bx-default-pager a:hover,.bx-wrapper .bx-pager.bx-default-pager a.active{background: #000;}
.bx-wrapper .bx-prev{left: 10px;}
.bx-wrapper .bx-next{right: 10px;}
.bx-wrapper .bx-prev:hover{background-position: 0 0;}
.bx-wrapper .bx-next:hover{background-position: -43px 0;}
.bx-wrapper .bx-controls-direction a{position: absolute; top: 50%; margin-top: -16px; outline: 0; width: 32px; height: 32px; text-indent: -9999px; z-index: 9999;}
.bx-wrapper .bx-controls-direction a.disabled{display: none;}
.bx-wrapper .bx-controls-auto{text-align: center;}
.bx-wrapper .bx-controls-auto .bx-start{display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; margin: 0 3px;}
.bx-wrapper .bx-controls-auto .bx-start:hover,.bx-wrapper .bx-controls-auto .bx-start.active{background-position: -86px 0;}
.bx-wrapper .bx-controls-auto .bx-stop{display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; margin: 0 3px;}
.bx-wrapper .bx-controls-auto .bx-stop:hover,.bx-wrapper .bx-controls-auto .bx-stop.active{background-position: -86px -33px;}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager{text-align: left; width: 80%;}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto{right: 0; width: 35px;}
.bx-wrapper .bx-caption{position: absolute; bottom: 0; left: 0; background: #666\9; background: rgba(80,80,80,0.75); width: 100%;}
.bx-wrapper .bx-caption span{color: #fff; font-family: Arial; display: block; font-size: .85em; padding: 10px;}

/* login-layer */
.login-layer{width: 440px; height: 440px; margin: -220px 0 0 -220px;}

/* register-layer */
.register-layer{width: 440px; /*height: 526px; */margin: -263px 0 0 -220px;}

.detail-layer .close,.detail-layer p span{ background: url(../Images/icon2.png) no-repeat;}

.detail-layer{ position: fixed; top: 50%; left: 50%; margin: -78px 0 0 -150px; border-radius: 3px; overflow: hidden; background-color: #fff; width: 300px; height: 157px; z-index: 1000; border: 1px solid #e4e4e4;}
.detail-layer .close{ position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; background-position: -16px -82px; cursor: pointer;}
.detail-layer p{ margin-top: 64px; text-align: center; line-height: 26px; font-size: 14px; color: #121212;}
.detail-layer p span{ display: inline-block; padding-left: 35px; background-position: 0 0;}

.detail-layer .xiajia{ background-position: 0 -42px;}

/* 分页样式 */
.pagination {
    clear: both;
    color: #999;
    text-align: center;
    background-color: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    height: 38px;
    line-height: 38px;
    margin-top:20px;
}
.pagination a {
    border: 1px solid #e4e4e4;
    color: #333;
    display: inline-block;
    font-family: 宋体;
    height: 20px;
    line-height: 20px;
    margin: 0 2px;
    padding: 0 10px;
}
.pagination a.on, .pagination a:hover {
    background-color: #1499f7;
    border: 1px solid #1499f7;
    color: #fff;
    text-decoration: none;
}
.pagination .t {
    border: 1px solid #ccc;
    height: 16px;
    line-height: 16px;
    padding: 2px 0;
    position: relative;
    text-align: center;
    width: 30px;
}
.pagination .next, .pagination .prev {
}
.pagination button {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
    cursor: pointer;
    height: 22px;
    line-height: 20px;
    margin-left: 5px;
    position: relative;
    width: 48px;
}
.pagination button:hover { background-color: #f5f5f5;}

.page{ margin-top: 20px; height: 38px; line-height: 38px; background-color: #fff; border: 1px solid #e4e4e4; border-radius: 3px;}
.page a,.page span{ float: left; width: 37px; text-align: center; border-right: 1px solid #f1f1f1; color: #999;}
.page a:hover{ text-decoration: none;}
.page .cur{ color: #1499f7;}
.page .prev,.page .next{ width: 90px; color: #000;}
.page .next{ float: right; border-right: 0 none; border-left: 1px solid #f1f1f1;}
.page .prev i,.page .next i{ font-family: simsun; font-style: normal;}
.page .prev i{ margin-right: 11px;}
.page .next i{ margin-left: 11px;}
.page .disabled,.page .disabled:hover{ cursor: default; color: #999;}


.top-tips{ height: 40px; line-height: 40px; background-color: #fff29d; text-align: center; color: #f83f16;}
.top-tips .link,.top-tips .link:hover{ color: #1499f8; text-decoration: underline;}

.sub-nav{ margin-top: 30px;}
.sub-nav .title{ float: left; font-size: 18px; line-height: 28px; font-weight: 400;}
.sub-nav .links{ float: left; margin: 4px 0 0; font-size: 14px; line-height: 24px;}
.sub-nav .links a{ margin-left: 37px;}
.sub-nav .links .cur{ color: #1499f7;}

.main-wrap{ margin: 15px 0 0;}
.main-wrap .main-inner{ float: left; width: 740px;}
.main-wrap .aside{ float: right; width: 340px;}
.m-section{background-color: #fff; border: 1px solid #e4e4e4;}
.m-section .header{ line-height: 26px; font-size: 18px;}
.m-section .header h3{ color: #1499f7; font-weight: 400;}

/*  goto top and service */
.fixed-layer{ height: 98px; width: 44px; position: fixed; left: 50%; bottom: 50px; margin-left: 610px; z-index: 10; display: none;}
.fixed-layer a,.fixed-layer .goTop{ display: block; width: 44px; height: 44px; margin-top: 10px; background-image: url(../Images/gotop.png); background-repeat: no-repeat; font-size: 0; -webkit-transition:all .2s linear; transition:all .2s linear;}
.fixed-layer .service{ background-position: 0 0;}
.fixed-layer .goTop{ background-position: 0 -108px; cursor: pointer;}
.fixed-layer .service:hover{ background-position: 0 -54px;}
.fixed-layer .goTop:hover{ background-position: 0 -162px;}

/* 优惠券页面样式 */
.coupon-banner{ height: 308px; background: #f33026 url(../Images/coupon-banner.jpg) no-repeat top center;}
.coupon-rules-wrap{ background: #f1efbc; padding: 50px 0 47px;}
.coupon-rules-wrap .inner{ padding: 0 0 0 210px;}
.coupon-rules-wrap .inner h3{ font-size: 24px; color: #9c0e0a; line-height: 42px; font-weight: 100;}
.coupon-rules-wrap .inner p{ font-size: 16px; line-height: 36px; color: #9c0e0a;}

.coupon-content{ background-color: #f9f7cb;}
.coupon-content .inner{ margin: 0 auto; width: 580px; padding: 53px 0 60px;}
.coupon-content .inner h3{ color: #b00b07; font: 24px/36px "microsoft yahei"; text-align: center;}
.coupon-content .inner .box{ position: relative; display: block; margin-top: 21px; width: 580px; height: 306px; background: url(../Images/coupon-red-paper.png) no-repeat; cursor: pointer;}
.coupon-content .inner .box span{ position: absolute; top: 42px; left: 212px; display: block; width: 153px; height: 153px; font-size: 0;}
.coupon-content .inner .box:hover span{ background: url(../Images/coupon-hover.png) no-repeat;}
.coupon-layer{ position: fixed; top: 50%; left: 50%; width: 540px; height: 270px; margin: -135px 0 0 -270px; border-radius: 8px; background-color: #f83f16; text-align: center; z-index: 1100;}
.coupon-layer .close{ position: absolute; top: 3px; right: 4px; width: 28px; height: 28px; background: url(../Images/reservation.png) no-repeat -112px 0;}
.coupon-layer .title{ margin-top: 65px; font-size: 36px; line-height: 50px; color: #ffe554;}
.coupon-layer .yuyue-btn{ display: block; margin: 15px auto 0; width: 160px; height: 54px; background: #fff29d; font-size: 24px; color: #f83f16; line-height: 54px; text-align: center; border-radius: 3px; box-shadow: 3px 5px 0 0 rgba(187,26,0,.5);}
.coupon-layer .txt{ margin-top: 15px; font-size: 16px; color: #ffe554;}
.coupon-successed .title{ margin-top: 30px;}
.coupon-successed .txt1{ font-size: 14px; line-height: 20px; color: #fef3c2;}
.coupon-successed .txt2{ margin-top: 4px; font-size: 20px; line-height: 28px; color: #fef3c2;}
.coupon-successed .yuyue-btn{ margin-top: 21px;}

/* topic-page header public css */
.page-top{ position: relative;}
.topic-header{ position: absolute; top: 0; left: 0; width: 100%; height: 38px; padding: 21px 0; z-index: 50; /*background-color: #fff;*/}
.topic-header .wrapper{ width: 1200px; position: relative;}
.topic-header .wrapper .logo{ margin-top: 4px;}
.topic-header .shopping-cart-box{position: relative; float: right; width: 62px; line-height: 38px;}
.topic-header .shopping-cart-box .cart-trigger{display: block; height: 38px; margin: 1px 1px 0; text-align: center; cursor: pointer;}
.topic-header .shopping-cart-box .chart-icon{display: inline-block; width: 15px; height: 15px; overflow: hidden; margin: -5px 4px 0 0; background-position: -155px 0; font: 0/0 arial; vertical-align: middle;}
.topic-header .shopping-cart-box .num{display: inline-block; height: 14px; margin: -3px 0 0; padding: 0 4px; -webkit-border-radius: 3px; border-radius: 3px; background: #1499f7; color: #fff; font: normal 12px/14px arial; vertical-align: middle;}

.topic-header .login-center-box{position: relative; float: right; width: 77px; height: 38px; padding: 0 18px 0 0; text-align: right; /*cursor: pointer;*/}
.topic-header .login-center-box .login-icon{display: inline-block; width: 13px; height: 14px; overflow: hidden; margin: 12px 0 0 0; background-position: -157px -70px; font: 0/0 arial; vertical-align: middle; cursor: pointer;}


.topic-header .personal-center-box{position: relative; float: right; width: 118px; cursor: pointer;}
.topic-header .personal-center-trigger{display: block; height: 38px; margin: 1px 1px 0; text-align: center;}
.topic-header .personal-center-trigger img{-webkit-border-radius: 50%; border-radius: 50%; vertical-align: top;}
.topic-header .personal-center-trigger .trigger-text{display: inline-block; width: 85px; font: normal 12px/38px 'Microsoft YaHei','\5FAE\8F6F\96C5\9ED1'; vertical-align: middle; overflow: hidden;}
.topic-header .personal-center-trigger .arrow-icon{display: inline-block; width: 7px; height: 5px; overflow: hidden; margin: 0 0 0 4px; background-position: -163px -30px; vertical-align: middle;}
.topic-header .personal-center-layerbox{display: none; position: absolute; left:0; border: 1px solid #e4e4e4; border-top: 0 none; background: #fff; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.15); box-shadow: 0 2px 5px rgba(0,0,0,.15); *width: 116px;}
.topic-header .personal-center-links{padding: 6px 0;}
.topic-header .personal-center-links li{position: relative; height: 28px; width: 118px; overflow: hidden; margin: 0 -1px; font: normal 12px/28px 'Microsoft YaHei','\5FAE\8F6F\96C5\9ED1'; *width: 117px; text-align: left;}
.topic-header .personal-center-links a{position: relative; display: block; height: 28px; padding: 0 0 0 32px;}
.topic-header .personal-center-links li:hover{z-index: 100;}
.topic-header .personal-center-links a:hover{background: #1497f4; color: #fff; text-decoration: none;}
.topic-header .has-layer .personal-center-trigger{margin: 0; -webkit-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; border: 1px solid #e4e4e4; border-bottom: 0 none; background: #f9f9f9;}
.topic-header .personal-center-box.has-layer{z-index: 10; box-shadow: 0 0 5px rgba(0,0,0,.15);}
.topic-header .personal-center-box.has-layer .arrow-icon{margin-top: 2px; background-position: -163px -50px;}
.topic-header .personal-center-box.has-layer .personal-center-layerbox{display: block; -webkit-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px ;} 


/* double background bg */
@media screen and (-webkit-min-device-pixel-ratio:2.0),screen and (-moz-min-device-pixel-ratio:2),screen and (min--moz-device-pixel-ratio:2),screen and (min-device-pixel-ratio:2.0) {
	.global-header .logo,.topic-header .wrapper .logo{ background-image: url(../Images/logo@2x.png); -webkit-background-size: 138px 38px;background-size: 138px 38px;}   
	.topic-header .icon,.icon{background-image: url(../Images/main-bg@2x.png); -webkit-background-size: 170px 327px; background-size: 170px 327px;}
	.personal-inner .personal-avator .ico,.global-header .my-cart a{ background-image: url(../Images/home_new_icon@2x.png); -webkit-background-size: 200px 130px; background-size: 200px 130px;}
	.fixed-layer a,.fixed-layer .goTop{ background-image: url(../Images/gotop@2x.png); -webkit-background-size: 44px 206px; background-size: 44px 206px;}
	}
}

 @font-face {
	font-family: 'AvenirNextCondensed';
	src: url('../fonts/AvenirNextCondensed.eot'); 
	src: url('../fonts/AvenirNextCondensed.eot?#iefix') format('embedded-opentype'), 
	         url('../fonts/AvenirNextCondensed.woff') format('woff'), 
	         url('../fonts/AvenirNextCondensed.ttf') format('truetype'), 
	         url('../fonts/AvenirNextCondensed.svg#AvenirNextCondensed') format('svg'); 
	         font-weight: normal;
			 font-style: normal;
}

/*  fonts */
 /*@font-face {
	font-family: 'HYQiHei-40S';
	src: url('../fonts/HYQiHei-40S.eot'); 
	src: url('../fonts/HYQiHei-40S.eot?#iefix') format('embedded-opentype'), 
	         url('../fonts/HYQiHei-40S.woff') format('woff'), 
	         url('../fonts/HYQiHei-40S.ttf') format('truetype'), 
	         url('../fonts/HYQiHei-40S.svg#HYQiHei-40S') format('svg'); 
     font-weight: normal;
	 font-style: normal;
 }
  @font-face {
	font-family: 'HYQiHei-50S';
	src: url('../fonts/HYQiHei-50S.eot'); 
	src: url('../fonts/HYQiHei-50S.eot?#iefix') format('embedded-opentype'), 
	         url('../fonts/HYQiHei-50S.woff') format('woff'), 
	         url('../fonts/HYQiHei-50S.ttf') format('truetype'), 
	         url('../fonts/HYQiHei-50S.svg#HYQiHei-50S') format('svg'); 
     font-weight: normal;
	 font-style: normal;
 }

.font40s{ font-family: "HYQiHei-40S","microsoft yahei";}
.font50s{ font-family: "HYQiHei-50s","microsoft yahei";}*/




.active-layer{ position: fixed; top: 50%; left: 50%; width: 540px; height: 270px; background-color: #fff; margin: -135px 0 0 -270px; border-radius: 7px; z-index: 1001; text-align: center; color: #333;}
.active-layer .close{ position: absolute;  top: 4px; right: 4px; width: 28px; height: 28px; background: url(../Images/close.png) no-repeat;}
.active-layer .title{ margin-top: 61px; font-size: 36px; line-height: 64px; font-weight: 700;}
.active-layer .txt{ font-size: 16px; line-height: 24px;}
.active-layer .link{ color: #ff983c; display: inline-block; line-height: 26px; font-size: 14px;}

.active-layer .title1{ margin-top: 46px;}
.active-layer .title3{ margin-top: 73px;}
.load{ display: block; margin: 25px auto 0;}


/* 开售提醒弹层 */
.remind-layer{ width: 440px; height: 270px; margin: -135px 0 0 -220px;}
.remind-layer .pop-layer-head .txt{ margin-left: 15px; font-size: 12px; color: #999;}
.remind-layer .remind-form{ padding: 10px 0 0 60px;}
.remind-layer .remind-form li{ padding-top: 20px; line-height: 38px; font-size: 12px;}
.remind-layer .remind-form .txt{ float: left; width: 298px; height: 26px; padding: 5px 10px; background-color: #fff; border: 1px solid #ddd; font:14px/26px "microsoft yahei"; outline: none; border-radius: 3px;}
.remind-layer .yzm .txt{ width: 147px;}
.remind-layer .yzm .yzmImg{ float: left; margin: 0 13px 0 16px;}
.remind-layer .yzm .yzmImg img{ vertical-align: top;}
.remind-layer .yzm .link{ float: left; color: #999;}
.remind-layer .yzm .link:hover{ text-decoration: underline;}
.remind-layer .remind-form .btn{ float: left; margin-right: 13px; width: 100px; height: 36px; background-color: #239bf4; color: #fff; font: 14px/36px "microsoft yahei"; border: 0 none; border-radius: 3px; outline: none; cursor: pointer;}
.remind-layer .remind-form .tips{ color: #f04e3a; font-size: 12px;}

.remind-succuss{ width: 340px; margin-left: -170px;}

.sale-header{ position: static; background-color: #fff; border-bottom: 1px solid #E6E6E6;}

.la-pacman,.la-pacman>div {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.la-pacman {
    display: block;
    font-size: 0;
    color: #fff
}

.la-pacman.la-dark {
    color: #333
}

.la-pacman>div {
    display: inline-block;
    float: none;
    background-color: #ff983c;
    border: 0 solid #ff983c
}

.la-pacman>div:nth-child(1),.la-pacman>div:nth-child(2) {
    width: 0;
    height: 0;
    background: transparent;
    border-style: solid;
    border-width: 16px;
    border-right-color: transparent;
    border-radius: 100%;
    -webkit-animation: pacman-rotate-half-up 0.4s 0s infinite;
    -moz-animation: pacman-rotate-half-up 0.4s 0s infinite;
    -o-animation: pacman-rotate-half-up 0.4s 0s infinite;
    animation: pacman-rotate-half-up 0.4s 0s infinite;
    overflow: hidden;
}

.la-pacman>div:nth-child(2) {
    margin-top: -32px;
    -webkit-animation-name: pacman-rotate-half-down;
    -moz-animation-name: pacman-rotate-half-down;
    -o-animation-name: pacman-rotate-half-down;
    animation-name: pacman-rotate-half-down
}

.la-pacman>div:nth-child(3),.la-pacman>div:nth-child(4),.la-pacman>div:nth-child(5),.la-pacman>div:nth-child(6),.la-pacman>div:nth-child(7),.la-pacman>div:nth-child(8) {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    left: 250%;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    opacity: 0;
    -webkit-animation: pacman-balls 2.4s 0s infinite linear;
    -moz-animation: pacman-balls 2.4s 0s infinite linear;
    -o-animation: pacman-balls 2.4s 0s infinite linear;
    animation: pacman-balls 2.4s 0s infinite linear
}

.la-pacman>div:nth-child(3) {
    -webkit-animation-delay: -1.44s;
    -moz-animation-delay: -1.44s;
    -o-animation-delay: -1.44s;
    animation-delay: -1.44s
}

.la-pacman>div:nth-child(4) {
    -webkit-animation-delay: -1.84s;
    -moz-animation-delay: -1.84s;
    -o-animation-delay: -1.84s;
    animation-delay: -1.84s
}

.la-pacman>div:nth-child(5) {
    -webkit-animation-delay: -2.24s;
    -moz-animation-delay: -2.24s;
    -o-animation-delay: -2.24s;
    animation-delay: -2.24s
}

.la-pacman>div:nth-child(6) {
    -webkit-animation-delay: -2.64s;
    -moz-animation-delay: -2.64s;
    -o-animation-delay: -2.64s;
    animation-delay: -2.64s
}
.la-pacman>div:nth-child(7) {
    -webkit-animation-delay: -3.04s;
    -moz-animation-delay: -3.04s;
    -o-animation-delay: -3.04s;
    animation-delay: -3.04s;
}
.la-pacman>div:nth-child(8) {
    -webkit-animation-delay: -3.44s;
    -moz-animation-delay: -3.44s;
    -o-animation-delay: -3.44s;
    animation-delay: -3.44s;
}

.la-pacman.la-sm {
    width: 16px;
    height: 16px
}

.la-pacman.la-sm>div:nth-child(1),.la-pacman.la-sm>div:nth-child(2) {
    border-width: 8px
}

.la-pacman.la-sm>div:nth-child(2) {
    margin-top: -16px
}

.la-pacman.la-sm>div:nth-child(3),.la-pacman.la-sm>div:nth-child(4),.la-pacman.la-sm>div:nth-child(5),.la-pacman.la-sm>div:nth-child(6) {
    width: 4px;
    height: 4px
}

.la-pacman.la-2x {
    width: 64px;
    height: 64px;
    margin: 15px 0 0 185px;
}

.la-pacman.la-2x>div:nth-child(1),.la-pacman.la-2x>div:nth-child(2) {
    border-width: 32px;
}

.la-pacman.la-2x>div:nth-child(2) {
    margin-top: -64px
}

.la-pacman.la-2x>div:nth-child(3),.la-pacman.la-2x>div:nth-child(4),.la-pacman.la-2x>div:nth-child(5),.la-pacman.la-2x>div:nth-child(6),.la-pacman.la-2x>div:nth-child(7),.la-pacman.la-2x>div:nth-child(8) {
    width: 16px;
    height: 16px;
    font-size: 12px;
    color: #fff;
    line-height: 16px;
    text-align: center;
}
@-webkit-keyframes pacman-rotate-half-up {
    0%,100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg)
    }

    50% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-moz-keyframes pacman-rotate-half-up {
    0%,100% {
        -moz-transform: rotate(270deg);
        transform: rotate(270deg)
    }

    50% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-o-keyframes pacman-rotate-half-up {
    0%,100% {
        -o-transform: rotate(270deg);
        transform: rotate(270deg)
    }

    50% {
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes pacman-rotate-half-up {
    0%,100% {
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        transform: rotate(270deg)
    }

    50% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes pacman-rotate-half-down {
    0%,100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@-moz-keyframes pacman-rotate-half-down {
    0%,100% {
        -moz-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    50% {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@-o-keyframes pacman-rotate-half-down {
    0%,100% {
        -o-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    50% {
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes pacman-rotate-half-down {
    0%,100% {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    50% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}
@-webkit-keyframes pacman-balls {
    0% {
        left: 250%;
        opacity: 0;
        background-color: #04765e;
    }

    5% {
        opacity: .5;
         background-color: #cca940;
    }

    66% {
        opacity: 1;
        background-color: #ff573c;
    }

    67% {
        opacity: 0
    }

    100% {
        left: 0;
    }
}

@-ms-keyframes pacman-balls {
    0% {
        left: 250%;
        opacity: 0;
    }

    5% {
        opacity: .5
    }

    66% {
        opacity: 1
    }

    67% {
        opacity: 0
    }

    100% {
        left: 0;
    }
}

@-moz-keyframes pacman-balls {
    0% {
        left: 250%;
        opacity: 0;
    }

    5% {
        opacity: .5
    }

    66% {
        opacity: 1
    }

    67% {
        opacity: 0
    }

    100% {
        left: 0;
    }
}

@-o-keyframes pacman-balls {
    0% {
        left: 250%;
        opacity: 0;
    }

    5% {
        opacity: .5
    }

    66% {
        opacity: 1
    }

    67% {
        opacity: 0
    }

    100% {
        left: 0;
    }
}

@keyframes pacman-balls {
     0% {
        left: 250%;
        opacity: 0;
        background-color: #04765e;
    }

    5% {
        opacity: .5;
         background-color: #cca940;
    }

    66% {
        opacity: 1;
        background-color: #ff573c;
    }

    67% {
        opacity: 0
    }

    100% {
        left: 0;
    }
}
		

















